<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<title>本期活动</title>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="/static/diary/css/rijiDP.css" />
	<link rel="stylesheet" href="/static/common/css/mescroll.min.css" />
	<style>
		[v-cloak] {
			    display: none !important;
			}
		.loading{
			width: 100%;
			height:100%;
			background-color: rgba(0,0,0,0.5);
			z-index: 999999;
			text-align: center;
			padding-top: 17rem;
			position: absolute;
			top:0;
			left:0;
		}
	</style>
</head>

<body>
	<div class="loading">加载中......</div>
	<!-- top -->
	<!--<header id="top">
		<img src="/static/diary/assets/arrow.png">本期活动
	</header>-->
	<div id="main">
		<div class='logo' v-cloak>
			<img v-bind:src="topic_logo" class="banner" />
			<div id="huati">
				<div class="huati_t">
					<h3>话题：[topic_title]</h3>
					<div>
						<img src="/static/diary/assets/Group 9.png" />
						<span>[topic_sum_comment]条点评</span>
					</div>
				</div>
				<p class="gaishu" v-html="topic_content">[topic_content]</p>
				<p class="mingz">编辑 | <span>[editor]</span></p>
				<p class="time">TIME | [ctime]</p>
			</div>
		</div>
		<!-- 妈妈日记精选 -->
		<div id="rijiJX" class="mescroll" v-cloak>
			<p class="ceshi">妈妈日记精选</p>
			<div class="rijiJX_b">
				<div class="rijiJX_k" v-for="(item,index) in rijiList">
					<div class="touxiang">
						<div class="tou">
							<img v-bind:src="item.editor_avatar" style="width: 2.1rem;height: 2.1rem;" />
						</div>
						<span>[item.editor_name]</span>
					</div>
					<div class="rijiJX_k_tu" onclick='aHref(this)' v-bind:attr_id='item.id'>
						<img v-bind:src="item.diary_logo" />
					</div>
					<div class="rijiJX_k_zan">
						<div class="yan">
							<span class="di">[item.read_num]</span>
						</div>
						<div onclick='dianzan(this)' v-bind:attr_id='item.id' :class='{dianzan: item.iszan == 0,liangdianzan: item.iszan == 1}' >
							<span class="di">[item.zan_num]</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<!--<script type="text/javascript" src="/static/common/js/zepto.js"></script>-->
<script type="text/javascript" src="/static/common/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/static/diary/js/rijiZW.js"></script>
<script type="text/javascript" src="/static/common/js/mescroll.min.js"></script>
<script type="text/javascript" src="/static/common/js/vue.js"></script>
<script type="text/javascript" src="/static/common/js/jockey.min.js"></script>
<script type="text/javascript" src="/static/common/js/public.js"></script>

<script type="text/javascript">
	var gid = {{gid}};
	var Api = {
		base: 'https://clubbear.clubbear.cn',
		riji: '/diary/GetLeftComment',
		rijiList: '/diary/GetRecomDiary',
		dianzan: '/diary/AgreeZan',
		huati: '/diary/GetActivityDetail'
	}
	$(document).ready(function(){ 
		$.ajax({
			url: Api.base + Api.huati,
			type: 'post',
			data:{
				period:gid
			},
			dataType: 'json',
			success: function (data) {
				//alert("看你长得美");
				//console.log(data.data);
				if( data.code == 1 ){
					alert(data.message);
				$(".loading").hide();
					return;
				}
				var topic_content = data.data.topic_content;
				//alert(topic_content);
				var topic_sum_comment = data.data.topic_sum_comment;
				var topic_title = data.data.topic_title;
				var editor = data.data.editor;
				var topic_logo = data.data.topic_logo;
				var ctime = data.data.ctime;
				var app = new Vue({
					el: '.logo',
					delimiters: ['[', ']'],
					data: {
						topic_content: topic_content,
						topic_sum_comment: topic_sum_comment,
						topic_title: topic_title,
						editor: editor,
						topic_logo: topic_logo,
						ctime:ctime,
					}
				})
				$(".loading").hide();
			},
			error: function () {
			   console.log('获取日记列表数据失败');	
			}
			
		});
		//alert('随便1');
				
		
		
		// 日记精选
		var vm = new Vue({
			el: "#rijiJX",
			delimiters: ['[', ']'],
			data: {
				mescroll: null,
				rijiList: []
			},
			mounted: function() {
				//创建MeScroll对象,down可以不用配置,因为内部已默认开启下拉刷新,重置列表数据为第一页
				//解析: 下拉回调默认调用mescroll.resetUpScroll(); 而resetUpScroll会将page.num=1,再执行up.callback,从而实现刷新列表数据为第一页;
				var self = this;
				self.mescroll = new MeScroll("rijiJX", {
					up: {
						callback: self.upCallback,

						page: {
							size: 5
						}
					},
					// 锁定上拉恢复
					down: {
						isLock: true
					}
				});
			},
			methods: {
				//上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
				upCallback: function(page) {
					console.log("page.num=="+page.num+", page.size=="+page.size);
					//联网加载数据
					var self = this;
					getListDataFromNet(page.num, page.size, function(data) {
						//data=[]; //打开本行注释,可演示列表无任何数据empty的配置
						
						//如果是第一页需手动制空列表
						if(page.num == 1) self.rijiList = [];
						
						//更新列表数据
						self.rijiList = self.rijiList.concat(data);
						
						
						//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
						//传参:数据的总数; mescroll会自动判断列表是否有无下一页数据,如果数据不满一页则提示无更多数据;
						self.mescroll.endSuccess(data.length);
						
					}, function() {
						//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
						self.mescroll.endErr();
					});
				},
			},
		});
		
		//alert('随便');
		function getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
			$.ajax({
				url: Api.base + Api.rijiList,
				data: {
					period: gid,
					page: pageNum,
					num: pageSize
				},
				type: 'post',
				dataType: 'json',
				success: function (res) {
					successCallback && successCallback(res.data);
				},
				error: function (xhr, state, err) {
					if (errorCallback) {
						errorCallback(err);
					} else {
						console.log('获取日记列表数据失败', err);
					}
				}
			});
		}
		
	}); 
	
	function aHref(obj){
		window.location.href = '/diary/rijiZW.html?gid='+$(obj).attr('attr_id');
	}	
	function dianzan(obj){
		if( loginCall() ){
			var did = $(obj).attr('attr_id');
			if( $(obj).attr('class') == 'liangdianzan' ){
				$(obj).find('span').text( parseInt( $(obj).find('span').text() ) - 1 );
				$(obj).removeClass('liangdianzan').addClass('dianzan');
			}else{
				$(obj).find('span').text( parseInt( $(obj).find('span').text() ) + 1 );
				$(obj).removeClass('dianzan').addClass('liangdianzan');
			}
			//  获取点赞接口数据
			$.ajax({
				type: "post",
				url: "/diary/AgreeZan",
				data:{
					did:did
				},
				dataType: "json",
				success: function (data) {
					//console.log(data);
				},
				error: function (data) {
					//console.log(data);	
				}
			});
		}
	}
</script>
</html>
